<template>
  <div @click.stop="clickTap(item)" class="tree-item-box" v-for="item in data">
    <input v-model="item.checked" type="checkbox"> <span>{{ item.name }}</span>
    <Tree v-if="item.children?.length" :data="item.children"></Tree>
  </div>
</template>

<script setup lang='ts'>
import { ref, reactive } from 'vue'
interface ITree {
    name: string
    checked: false
    children?: ITree[]
}
defineProps<{
    data?: ITree[]
}>()
const clickTap = (item) => {
    console.log('clickTap==', item)
}
</script>
<style lang='scss' scoped>
.tree-item-box {
    margin-left: 10px;
}
</style>